<template>
  <div class="fillcontain">
    <device-form @getRecordData="getMaintainRecord" @resetData="resetData"/>
   <!-- 订单表格 -->
   <div class="table_container">
    <el-table
      size="mini"
      border
      v-loading="loading"
      element-loading-text = "数据正在加载中..."
      element-loading-spinner = "el-icon-loading"
      :data="recordList"
      style="width: 100%"
      align="center">
      <el-table-column
        prop="machine_no"
        label="设备号"
        align="center"
        sortable>
      </el-table-column>
      <el-table-column
        prop="facility_name"
        label="设备名称"
        align="center">
      </el-table-column>
      <el-table-column 
        prop="factory_no" 
        label="厂区" 
        align="center">
      </el-table-column>
      <el-table-column 
        prop="workshop_no" 
        label="厂房" 
        align="center">
      </el-table-column>
      <el-table-column 
        prop="user_name" 
        label="养护员" 
        align="center">
      </el-table-column>
      <el-table-column 
        label="保养时间" 
        align="center">
        <template slot-scope="scope">
         <span class="shenlan"> {{ scope.row.operate }}</span>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页功能 -->
    <pagination
      :paginations="paginations"
      @handleCurrentChange="handleCurrentChange"
      @handleSizeChange="handleSizeChange"
    ></pagination>
   </div>
  </div>
</template>

<script>
import {recordList} from '@/api/maintain.js'
import DeviceForm from './childComps/DeviceForm.vue'
import Pagination from "@/components/pagination";
export default {
 components:{
    DeviceForm,
    Pagination,
 },
  data () {
    return {
       loading:false,
       recordList:[],
       paginations: {
        index: 1, // 当前位于哪页
        size: 10, // 1页显示多少条
        pageSizes: [8, 10, 15,20], //每页显示多少条
        pageTotal: 0, //总记录条数
      },
    }
  },
 created() {
    this.getRecordData()
 },
 methods:{
   async getRecordData(machine_no){
      let params={
        is_maintain: 0,
        machine_no,
        size:this.paginations.size,
        index:this.paginations.index
     }
     const res= await recordList(params)   
     this.recordList=res.data
     this.paginations.pageTotal=res.count
     this.loading = false;
    },
    getMaintainRecord(machine_no){
      this.paginations.index=1
      this.getRecordData(machine_no)
    },
     //清空
    resetData(){
      this.machine_no=null
      this.paginations.index=1
      this.getRecordData()
   },
      //上下分页
    handleCurrentChange(newPage) {
       this.paginations.index=newPage
       this.getRecordData()
    },
    //每页显示多少条
    handleSizeChange(newCount) {
      this.paginations.size=newCount
      this.getRecordData()
    },
 }
}
</script>
<style lang='scss' scoped>
</style>